<template>
  <div class="inventory-detail-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="title-section">
        <h2 class="page-title">
          盘点单号：{{ inventoryDetail.inventoryNnumber }}
          <el-button type="text" size="small" @click="copyNumber">
            <el-icon><CopyDocument /></el-icon>
          </el-button>
        </h2>
      </div>
      
      <!-- 右侧操作按钮 -->
      <div class="action-buttons">
        <el-button type="info" @click="handlePrint">打印</el-button>
      </div>
    </div>

    <!-- 基本信息区域 -->
    <div class="info-section">
      <!-- 第一行 -->
      <el-row :gutter="20" class="info-row">
        <el-col :span="8">
          <div class="info-item">
            <span class="label">制单人</span>
            <span class="value">{{ inventoryDetail.createUserName }}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info-item">
            <span class="label">盘点开始时间</span>
            <span class="value">{{ moment(inventoryDetail.inventoryStartTime).format('YYYY-MM-DD') }}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info-item">
            <span class="label">制单时间</span>
            <span class="value">{{ moment(inventoryDetail.createTime).format('YYYY-MM-DD') }}</span>
          </div>
        </el-col>
      </el-row>

      <!-- 第二行 -->
      <el-row :gutter="20" class="info-row">
        <el-col :span="8">
          <div class="info-item">
            <span class="label">盘点类型</span>
            <span class="value" v-if="inventoryDetail.inventoryType==1">全面盘点</span>
            <span class="value" v-if="inventoryDetail.inventoryType==2">部分盘点</span>
          </div>
        </el-col>

        <!-- 中间信息 -->
        <el-col :span="8">
          <div class="info-item">
            <span class="label">盘点结束时间</span>
            <span class="value">{{ moment(inventoryDetail.inventoryEndTime).format("YYYY-MM-DD") }}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info-item">
            <span class="label">仓库名称:</span>
            <span class="value">{{ inventoryDetail.storeName }}</span>
          </div>
        </el-col>
      </el-row>

      <!-- 第三行 -->
      <el-row :gutter="20" class="info-row">
        <el-col :span="8">
          <div class="info-item">
            <span class="label">经办人</span>
            <span class="value">{{ inventoryDetail.attnName }}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info-item">
            <span class="label">备注</span>
            <span class="value">{{ inventoryDetail.note || '-' }}</span>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 其他信息标签页 -->
    <div class="detail-section">
      <el-tabs v-model="activeTab" type="border-card" @tab-change="handleTabChange">
        <!-- 盘点明细 -->
        <el-tab-pane label="盘点明细" name="inventory">
          <div class="tab-content">
            <!-- 操作栏 -->
            <div class="operation-bar">
              <div class="left-actions">
                <el-button type="danger" size="small" @click="exportData">导出</el-button>
                <div class="total-amount">
                  <span class="label">合计金额：</span>
                  <span class="amount" :class="getTotalAmountClass()">{{ formatTotalAmount() }}</span>
                </div>
              </div>

              <div class="search-info">
                 <el-button type="primary" @click="handleInbound">入库</el-button>
                <el-button type="success" @click="handleOutbound">出库</el-button>
              </div>
            </div>

            <!-- 盘点明细表格 -->
            <el-table 
              :data="inventoryGoodsList" 
              style="width: 100%" 
              border
              max-height="400"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55" />
              <el-table-column type="index" label="序号" width="80" />
              <el-table-column prop="goodsName" label="货品名称" />
              <el-table-column prop="goodsNumber" label="货品编号" width="150" />
              <el-table-column property="goodsModel" label="货品规格" />
              <el-table-column property="goodsUnit" label="货品单位" />
              <el-table-column property="systemNum" label="系统库存数量" />
              <el-table-column property="actualNum" label="实际盘点数量" >
                <template v-slot="scoped">
                  <el-input 
                    v-model="scoped.row.actualNum" 
                    @input="calculateDifference(scoped.row)"
                    type="number"
                    placeholder="请输入实际盘点数量"
                  />
                </template>
              </el-table-column>
              <el-table-column property="differentCount" label="差异数量" >
                <template v-slot="scoped">
                  <span :class="getDifferenceClass(scoped.row.differentCount)">
                    {{ scoped.row.differentCount || 0 }}
                  </span>
                </template>
              </el-table-column>
               <el-table-column property="onePrice" label="单价" >
                <template v-slot="scope">
                  <span style="color: red;">{{scope.row.onePrice}}元</span>
                </template>
               </el-table-column>
              <el-table-column prop="note" label="备注" min-width="100" />
            </el-table>
            <div class="demo-pagination-block" style="margin-top: 20px;">
            <el-pagination
            v-model:current-page="page.PageIndex"
            v-model:page-size="page.PageSize"
            :page-sizes="[15, 20, 30, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.listcount"
            @size-change="handleInventorySizeChange"
            @current-change="handleInventoryCurrentChange"
            />
        </div>

          </div>
        </el-tab-pane>

        <!-- 入库记录 -->
        <el-tab-pane label="入库记录" name="inbound">
          <div class="tab-content">
            <!-- 入库记录操作栏 -->
            <div class="operation-bar">
              <div class="search-info">
                <span>共 {{ inboundRecords.length }} 条入库记录</span>
              </div>
              <div class="action-buttons">
                <el-button type="primary" size="small" @click="refreshInboundRecords">刷新</el-button>
                <el-button type="success" size="small" @click="exportInboundRecords">导出</el-button>
              </div>
            </div>
            
            <el-table :data="inboundRecords" style="width: 100%" border v-loading="inboundLoading">
              <el-table-column type="index" label="序号" width="80" />
              <el-table-column prop="inStoreNo" label="入库单号" width="180"/>
              <el-table-column prop="intOutStoreTime" label="入库时间" width="180">
                <template #default="scope">
                  {{ moment(scope.row.intOutStoreTime).format('YYYY-MM-DD HH:mm:ss') }}
                </template>
              </el-table-column>
              <el-table-column prop="goodsName" label="货品" width="120" />
              <el-table-column prop="count" label="入库数量" width="100" align="right" />
              <el-table-column prop="attnName" label="操作人" width="100" />
              <el-table-column prop="storeName" label="仓库" width="120" />
              <el-table-column prop="reson" label="备注" />
              <el-table-column prop="createTime" label="创建时间" width="180">
                <template #default="scope">
                  {{ moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
                </template>
              </el-table-column>
            </el-table>
            
            <!-- 分页 -->
            <div class="pagination-container" style="margin-top: 20px;">
              <el-pagination
                v-model:current-page="inboundPagination.PageIndex"
                v-model:page-size="inboundPagination.PageSize"
                :page-sizes="[10, 20, 50, 100]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="inboundPagination.Total"
                @size-change="handleInboundSizeChange"
                @current-change="handleInboundCurrentChange"
              />
            </div>
          </div>
        </el-tab-pane>

        <!-- 出库记录 -->
        <el-tab-pane label="出库记录" name="outbound">
          <div class="tab-content">
            <!-- 出库记录操作栏 -->
            <div class="operation-bar">
              <div class="search-info">
                <span>共 {{ outboundRecords.length }} 条出库记录</span>
              </div>
              <div class="action-buttons">
                <el-button type="primary" size="small" @click="refreshOutboundRecords">刷新</el-button>
                <el-button type="success" size="small" @click="exportOutboundRecords">导出</el-button>
              </div>
            </div>
            
            <el-table :data="outboundRecords" style="width: 100%" border v-loading="outboundLoading">
              <el-table-column type="index" label="序号" width="80" />
              <el-table-column prop="inStoreNo" label="出库单号" width="180"/>
              <el-table-column prop="intOutStoreTime" label="出库时间" width="180">
                <template #default="scope">
                  {{ moment(scope.row.intOutStoreTime).format('YYYY-MM-DD HH:mm:ss') }}
                </template>
              </el-table-column>
              <el-table-column prop="goodsName" label="货品" width="120" />
              <el-table-column prop="count" label="出库数量" width="100" align="right" />
              <el-table-column prop="attnName" label="操作人" width="100" />
              <el-table-column prop="storeName" label="仓库" width="120" />
              <el-table-column prop="reson" label="出库原因" />
              <el-table-column prop="createTime" label="创建时间" width="180">
                <template #default="scope">
                  {{ moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
                </template>
              </el-table-column>
            </el-table>
            
            <!-- 分页 -->
            <div class="pagination-container" style="margin-top: 20px;">
              <el-pagination
                v-model:current-page="outboundPagination.PageIndex"
                v-model:page-size="outboundPagination.PageSize"
                :page-sizes="[10, 20, 50, 100]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="outboundPagination.Total"
                @size-change="handleOutboundSizeChange"
                @current-change="handleOutboundCurrentChange"
              />
            </div>
          </div>
        </el-tab-pane>

        <!-- 操作记录 -->
        <el-tab-pane label="操作记录" name="operation">
          <div class="tab-content">
            <el-table :data="operationRecords" style="width: 100%" border>
              <el-table-column type="index" label="序号" width="80" />
              <el-table-column prop="operationTime" label="操作时间" width="180" />
              <el-table-column prop="operationType" label="操作类型" width="120" />
              <el-table-column prop="operator" label="操作人" width="100" />
              <el-table-column prop="description" label="操作描述" />
              <el-table-column prop="result" label="操作结果" width="100" />
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 入库/出库对话框 -->
    <InboundDialog
      v-model="inboundDialogVisible"
      :inventory-data="inventoryDetail"
      :mode="dialogMode"
      :selected-goods="selectedRows"
      @submit="handleDialogSubmit"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
import { CopyDocument } from '@element-plus/icons-vue'
import { inventoryRead } from '@/Helper/axiosSetting'
import moment from 'moment'
import InboundDialog from '@/components/InboundDialog.vue'
import { HubConnectionBuilder, HubConnection, LogLevel, HubConnectionState } from '@microsoft/signalr'

// 路由参数
const route = useRoute()

// 响应式数据
const activeTab = ref('inventory')
const inboundDialogVisible = ref(false)
const dialogMode = ref<'inbound' | 'outbound'>('inbound')
const selectedRows = ref<any[]>([])
const totalAmount = ref(0) // 选中货品的合计金额



const inventoryDetail = reactive({
  "id":0,
   "inventoryNnumber": "",
  "inventoryStatus": 3,
  "mid": 1,
  "inventoryType": 0,
  "storeId": '',
  "inventoryRange": '',
  "inventoryStartTime": "",
  "inventoryEndTime": "",
  "note": "",
  "taskType": 1,
    "attnId": 0,
  "attnName": "",
   "createUserId": '',
  "createUserName":'',
  "createTime": '',
  'storeName':''
})

const inventoryGoodsList = ref<any>([])

const page=reactive({
  PageIndex:1,
  PageSize:5,
  listcount:0
})

//获取
const getinventoryGoodsList=()=>{
  inventoryRead.get("/api/InventoryRead/GetGoodsList",{params:{
    PageIndex:page.PageIndex,
    PageSize:page.PageSize,
    Id:route.query.id
  }}).then(res=>{
    inventoryGoodsList.value=res.data.data.list
    page.listcount=res.data.data.count
    
    // 初始化每行数据的差异数量
    inventoryGoodsList.value.forEach((item: any) => {
      calculateDifference(item)
    })
  })
}


// 入库记录相关数据
const inboundRecords = ref<any[]>([])
const inboundLoading = ref(false)
const inboundPagination = reactive({
  PageIndex: 1,
  PageSize: 10,
  Total: 0
})

// 出库记录相关数据
const outboundRecords = ref<any[]>([])
const outboundLoading = ref(false)
const outboundPagination = reactive({
  PageIndex: 1,
  PageSize: 10,
  Total: 0
})

// 操作记录
const operationRecords = ref([])

// 页面初始化
onMounted(() => {
  getRuleform()
  loadInventoryGoods()
  getinventoryGoodsList()
  // 初始化时加载入库记录
  loadInboundRecords()
})

// 监听页面可见性变化，自动刷新数据
watch(() => document.visibilityState, (newState, oldState) => {
  if (newState === 'visible' && oldState === 'hidden') {
    console.log('🔄 页面重新可见，刷新盘点详情数据')
    getRuleform()
    getinventoryGoodsList()
    loadInboundRecords()
    loadOutboundRecords()
  }
})

// 统一的出入库记录获取方法
const getIntOutStoreRecords = async (isIntOrOut: boolean, pagination: any, records: any, loading: any) => {
  loading.value = true
  try {
    const response = await inventoryRead.get("/api/InventoryRead/GetIntOutStoreList", {
      params: {
        IsIntOrOut: isIntOrOut,
        PageIndex: pagination.PageIndex,
        PageSize: pagination.PageSize,
        InventoryId: route.query.id // 根据当前盘点单号过滤
      }
    })
    
    if (response.data.code === 200) {
      records.value = response.data.data.list
      pagination.Total = response.data.data.count
    } else {
      ElMessage.error(response.data.message || '获取数据失败')
    }
  } catch (error) {
    console.error('获取出入库记录失败:', error)
    ElMessage.error('获取数据失败')
  } finally {
    loading.value = false
  }
}

// 加载入库记录
const loadInboundRecords = () => {
  getIntOutStoreRecords(true, inboundPagination, inboundRecords, inboundLoading)
}

// 加载出库记录
const loadOutboundRecords = () => {
  getIntOutStoreRecords(false, outboundPagination, outboundRecords, outboundLoading)
}

// 刷新入库记录
const refreshInboundRecords = () => {
  loadInboundRecords()
}

// 刷新出库记录
const refreshOutboundRecords = () => {
  loadOutboundRecords()
}

// 导出入库记录
const exportInboundRecords = () => {
  ElMessage.info('导出入库记录功能开发中...')
}

// 导出出库记录
const exportOutboundRecords = () => {
  ElMessage.info('导出出库记录功能开发中...')
}

// 盘点明细分页处理
const handleInventorySizeChange = (size: number) => {
  page.PageSize = size
  page.PageIndex = 1
  getinventoryGoodsList()
}

const handleInventoryCurrentChange = (pageNum: number) => {
  page.PageIndex = pageNum
  getinventoryGoodsList()
}

// 入库记录分页处理
const handleInboundSizeChange = (size: number) => {
  inboundPagination.PageSize = size
  inboundPagination.PageIndex = 1
  loadInboundRecords()
}

const handleInboundCurrentChange = (page: number) => {
  inboundPagination.PageIndex = page
  loadInboundRecords()
}

// 出库记录分页处理
const handleOutboundSizeChange = (size: number) => {
  outboundPagination.PageSize = size
  outboundPagination.PageIndex = 1
  loadOutboundRecords()
}

const handleOutboundCurrentChange = (page: number) => {
  outboundPagination.PageIndex = page
  loadOutboundRecords()
}

// 监听标签页切换
const handleTabChange = (tabName: string) => {
  if (tabName === 'inbound' && inboundRecords.value.length === 0) {
    loadInboundRecords()
  } else if (tabName === 'outbound' && outboundRecords.value.length === 0) {
    loadOutboundRecords()
  }
}


// 加载盘点详情
const getRuleform=()=>{
  inventoryRead.get("/api/InventoryRead/GetInventoryTaskById",{params:{id:route.query.id}}).then(res=>{
    Object.assign(inventoryDetail,res.data.data)
  })
}

// 加载盘点货品明细
const loadInventoryGoods =()=>{
  
}


// 复制盘点单号
const copyNumber = () => {
  navigator.clipboard.writeText(inventoryDetail.inventoryNnumber)
  ElMessage.success('盘点单号已复制')
}

// 处理入库
const handleInbound = () => {
  // 检查是否有选中的货品
  const selectedGoods = getSelectedGoods()
  if (selectedGoods.length === 0) {
    ElMessage.warning('请先选择需要入库的货品')
    return
  }
  
  // 检查选中的货品是否有盘盈（差异数量为正数）
  const surplusGoods = selectedGoods.filter((item: any) => item.differentCount > 0)
  if (surplusGoods.length === 0) {
    // 检查是否有差异数量为0的货品
    const zeroDiffGoods = selectedGoods.filter((item: any) => item.differentCount === 0)
    if (zeroDiffGoods.length > 0) {
      ElMessage.warning('选中的货品差异数量为0，无需入库操作')
    } else {
      ElMessage.warning('请选择有盘盈的货品进行入库操作')
    }
    return
  }
  
  dialogMode.value = 'inbound'
  inboundDialogVisible.value = true
}

// 处理出库
const handleOutbound = () => {
  // 检查是否有选中的货品
  const selectedGoods = getSelectedGoods()
  if (selectedGoods.length === 0) {
    ElMessage.warning('请先选择需要出库的货品')
    return
  }
  
  // 检查选中的货品是否有盘亏（差异数量为负数）
  const lossGoods = selectedGoods.filter((item: any) => item.differentCount < 0)
  if (lossGoods.length === 0) {
    // 检查是否有差异数量为0的货品
    const zeroDiffGoods = selectedGoods.filter((item: any) => item.differentCount === 0)
    if (zeroDiffGoods.length > 0) {
      ElMessage.warning('选中的货品差异数量为0，无需出库操作')
    } else {
      ElMessage.warning('请选择有盘亏的货品进行出库操作')
    }
    return
  }
  
  dialogMode.value = 'outbound'
  inboundDialogVisible.value = true
}

// 获取选中的货品
const getSelectedGoods = () => {
  return selectedRows.value || []
}

// 处理表格选择变化
const handleSelectionChange = (selection: any[]) => {
  selectedRows.value = selection
  calculateTotalAmount() // 计算合计金额
}

// 计算选中货品的合计金额
const calculateTotalAmount = () => {
  if (!selectedRows.value || selectedRows.value.length === 0) {
    totalAmount.value = 0
    return
  }

  let total = 0
  selectedRows.value.forEach((item: any) => {
    const differentCount = Number(item.differentCount) || 0
    const onePrice = Number(item.onePrice) || 0
    // 计算差异数量 * 单价
    total += Math.abs(differentCount) * onePrice
  })
  
  totalAmount.value = total
}

// 格式化合计金额显示
const formatTotalAmount = () => {
  if (totalAmount.value === 0) return '0.00元'
  return `${totalAmount.value.toFixed(2)}元`
}

// 获取合计金额的样式类
const getTotalAmountClass = () => {
  if (totalAmount.value === 0) return ''
  return 'amount-highlight'
}

// 处理对话框提交
const handleDialogSubmit = (data: any) => {
  console.log('操作数据:', data)
  console.log('选中的货品:', selectedRows.value)
  const operationType = data.operationType
  ElMessage.success(`${operationType}操作成功`)
  // 这里可以调用API保存数据，传递选中的货品信息
}



// 处理打印
const handlePrint = () => {
  window.print()
}

// 导出数据
const exportData = () => {
  // 检查是否有选中的货品
  const selectedGoods = getSelectedGoods()
  if (selectedGoods.length === 0) {
    ElMessage.warning('请先选择需要导出的货品')
    return
  }

  // 获取选中货品的ID集合，尝试多种可能的ID字段名
  const goodsIds = selectedGoods.map((item: any) => {
    return item.id || item.goodsId || item.goodsNumber || item.gid
  }).filter(id => id)
  
  if (goodsIds.length === 0) {
    // 输出调试信息
    console.log('选中的货品数据:', selectedGoods)
    ElMessage.warning('所选货品缺少有效ID，无法导出。请检查数据结构或联系开发人员。')
    return
  }

  // 将货品ID集合转为字符串
  const goodsIdsString = goodsIds.join(',')

  // 确认消息
  ElMessageBox.confirm(
    `将导出 ${selectedGoods.length} 项选中的货品数据，是否继续？`,
    '确认导出',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'info'
    }
  ).then(() => {
    try {
      // 调用后台导出API
      const exportUrl = `http://localhost:5215/api/InventoryRead/UpDownGoodsExcel?ids=${encodeURIComponent(goodsIdsString)}`
      
      // 使用window.open下载文件
      window.open(exportUrl, '_blank')
      
      ElMessage.success(`正在导出 ${selectedGoods.length} 项货品数据...`)
    } catch (error) {
      console.error('导出失败:', error)
      ElMessage.error('导出失败，请稍后重试')
    }
  }).catch(() => {
    ElMessage.info('已取消导出')
  })
}


// 格式化金额
const formatAmount = (amount: any) => {
  if (amount === 0) return '0.00'
  if (!amount) return '-'
  return Number(amount).toFixed(2)
}

// 计算差异数量
const calculateDifference = (row: any) => {
  const systemNum = Number(row.systemNum) || 0
  const actualNum = Number(row.actualNum) || 0
  row.differentCount = systemNum - actualNum
  
  // 重新计算合计金额（如果该行已被选中）
  calculateTotalAmount()
}

// 获取差异数量/金额样式
const getDifferenceClass = (value: any) => {
  if (value > 0) return 'text-green'
  if (value < 0) return 'text-red'
  return ''
}
</script>

<style scoped>
.inventory-detail-container {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.page-title {
  margin: 0;
  color: #303133;
  font-size: 20px;
  font-weight: 600;
}

.action-buttons {
  display: flex;
  gap: 10px;
}

.info-section {
  margin-bottom: 20px;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.info-row {
  margin-bottom: 20px;
}

.info-row:last-child {
  margin-bottom: 0;
}

.info-item {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  min-height: 50px;
}

.info-item .label {
  width: 100px;
  color: #606266;
  font-weight: 500;
}

.info-item .value {
  color: #303133;
  flex: 1;
}

.status-section {
  border-left: 1px solid #ebeef5;
  padding-left: 20px;
}

.status-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}

.status-item .label {
  color: #909399;
  font-size: 12px;
  margin-bottom: 5px;
}

.status-item .value {
  color: #303133;
  font-weight: 500;
}

.warehouse-status {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #ebeef5;
}

.status-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.status-label {
  color: #606266;
  font-size: 12px;
}

.status-value {
  color: #303133;
  font-size: 12px;
}

.status-summary {
  text-align: center;
  margin-top: 10px;
  font-size: 12px;
  color: #909399;
}

.detail-section {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.tab-content {
  padding: 0;
}

.operation-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #ebeef5;
  margin-bottom: 15px;
}

.left-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.total-amount {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.total-amount .label {
  color: #606266;
  margin-right: 8px;
}

.total-amount .amount {
  font-weight: 600;
  color: #303133;
}

.total-amount .amount.amount-highlight {
  color: #e6a23c;
  font-size: 16px;
}

.search-info {
  color: #909399;
  font-size: 12px;
}

.text-red {
  color: #f56c6c !important;
}

.text-green {
  color: #67c23a !important;
}

:deep(.el-tabs__content) {
  padding: 20px;
}

:deep(.el-table .el-table__cell) {
  padding: 8px 0;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.search-info {
  display: flex;
  align-items: center;
  color: #606266;
  font-size: 14px;
}

.search-info span {
  margin-right: 10px;
}

:deep(.el-tabs__item) {
  font-size: 14px;
  font-weight: 500;
}

:deep(.el-tabs__item.is-active) {
  color: #409eff;
  font-weight: 600;
}

:deep(.el-table__header) {
  background-color: #f5f7fa;
}

:deep(.el-table__row:hover) {
  background-color: #f5f7fa;
}
</style>